<template>
    <div id="chartContainer" class="draft">
        <span class="first">信息管理 / 数据分析</span>
        <div class="content">
            <el-row>
                <el-col>
                    <div class="list interests">
                        <div class="list-title">
                            <div class="title left">畅行无忧</div>
                            <div class="date right">
                                <el-date-picker 
                                    @change="pieCx('cx','/chaimp/data_analyze_cx/',pieDate_cx?pieDate_cx[0]:'',pieDate_cx?pieDate_cx[1]:'')"
                                    value-format="yyyy-MM-dd"
                                    v-model="pieDate_cx"
                                    type="daterange"
                                    range-separator="-"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                        </div>
                        <div class="list-chart" v-loading="pieLoading_cx">
                            <pie-chart height="100%" width="100%" :chart-data="pieChartData_cx.newVisitis" />
                        </div>
                    </div>
                    <div class="list interests">
                        <div class="list-title">
                            <div class="title left">畅行无忧-数据对比</div>
                            <!-- <div class="date right">
                                <el-date-picker 
                                    value-format="yyyy-MM-dd"
                                    v-model="barDate_cx"
                                    type="date"
                                    placeholder="选择日期">
                                </el-date-picker>
                            </div> -->
                        </div>
                        <div class="list-chart" v-loading="barLoading_cx">
                            <bar-chart-hor height="100%" width="100%" :chart-data="barChartData_cx.newVisitis" />
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <div class="list interests">
                        <div class="list-title">
                            <div class="title left">延保服务</div>
                            <div class="date right">
                                <el-date-picker 
                                    @change="pieCx('yb','/chaimp/data_analyze_yb/',pieDate_yb?pieDate_yb[0]:'',pieDate_yb?pieDate_yb[1]:'')"
                                    value-format="yyyy-MM-dd"
                                    v-model="pieDate_yb"
                                    type="daterange"
                                    range-separator="-"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                        </div>
                        <div class="list-chart" v-loading="pieLoading_yb">
                            <pie-chart height="100%" width="100%" :chart-data="pieChartData_yb.newVisitis" />
                        </div>
                    </div>
                    <div class="list interests">
                        <div class="list-title">
                            <div class="title left">延保服务-数据对比</div>
                            <!-- <div class="date right">
                                <el-date-picker 
                                    class="date-range"
                                    value-format="yyyy-MM-dd"
                                    v-model="barDate_yb"
                                    type="date"
                                    placeholder="选择日期">
                                </el-date-picker>
                            </div> -->
                        </div>
                        <div class="list-chart" v-loading="barLoading_yb">
                            <bar-chart-ver height="100%" width="100%" :chart-data="barChartData_yb.newVisitis" />
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <div class="list interests-total">
                        <div class="list-title">
                            <div class="title left">
                                销售曲线
                                <el-select v-model="type" @change="lineSales(type,lineDate && lineDate.length>0?lineDate[0]:'', lineDate && lineDate.length>0?lineDate[1]:'')">
                                    <el-option label="月" value="月"></el-option>
                                    <el-option label="年" value="年"></el-option>
                                </el-select>

                            </div>
                            <div class="date right">
                                <el-date-picker 
                                    @change="lineSales(type,lineDate && lineDate.length>0?lineDate[0]:'', lineDate && lineDate.length>0?lineDate[1]:'')"
                                    value-format="yyyy-MM-dd"
                                    v-model="lineDate"
                                    type="daterange"
                                    range-separator="-"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                                </el-date-picker>
                            </div>
                        </div>
                        <div class="list-chart" v-loading="lineLoading">
                            <line-chart height="100%" width="100%" :chart-data="lineChartData.newVisitis" />
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
    import lineChart from '@/components/charts/LineChart'
    import barChartHor from '@/components/charts/BarChartHorizontal'
    import barChartVer from '@/components/charts/BarChartVertical'      //  延保服务-数据对比

    import pieChart from '@/components/charts/PieChart'


    export default {
        name: 'LineChart',
        components: { lineChart, barChartHor, barChartVer, pieChart },
        data() {
            return {
                type: '月',
                pieLoading_cx:  false,  
                pieLoading_yb: false,  
                barLoading_cx:  false,  
                barLoading_yb: false,  
                lineLoading: false,
                //  日期 start
                pieDate_cx: '',         //环形图-畅行
                pieDate_yb: '',         //环形图-延保
                barDate_cx:'',          //柱形图-畅行
                barDate_yb:'',          //柱形图-延保
                lineDate:'',            //折线图-销售曲线
                //  日期 end
                pieChartData_cx: {      //环形图-畅行
                    newVisitis:{
                        seriesData:[]
                    }
                },
                pieChartData_yb: {      //环形图-延保
                    newVisitis:{
                        seriesData:[]
                    }
                },
                barChartData_cx: {      //柱状图-畅行
                    newVisitis:{
                        name1: '',
                        name2: '',
                        seriesData1:[],
                        seriesData2:[]
                    }
                },
                barChartData_yb: {      //柱状图-延保
                    newVisitis:{
                        name1: '',
                        name2: '',
                        seriesData1:[],
                        seriesData2:[]
                    }
                },
                lineChartData: {        //折线图-销售曲线
                    newVisitis: {
                        xData: [],
                        cxData: [],
                        ybData: [],
                    },
                }
            }
        },
        mounted() {
            this.pieCx('cx','/statistics/cxStatistics','','');
            this.pieCx('yb','/statistics/ybStatistics','','')
            this.lineSales(this.type,'','')  
            this.barCompeted('cxwy','/statistics/cxDataComparison')
            this.barCompeted('ybfw','/statistics/ybDataComparison')       

        },
        methods:{
            pieCx(type,url,startTime,endTime) {       //  环形图
                if(type == 'cx') {this.pieLoading_cx = true}
                else if(type == 'yb') {this.pieLoading_yb = true}
                this.$http.get(this.GLOBAL.REQUESTURL + url+'?startTime='+startTime+'&endTime='+endTime).then(res => {
                    const result1 = res.data;
                    if(type == 'cx') {
                        this.pieChartData_cx.newVisitis.seriesData = result1&& result1.length > 0?result1:[];
                        this.pieLoading_cx = false
                    } else if(type == 'yb') {
                        this.pieChartData_yb.newVisitis.seriesData = result1&& result1.length > 0?result1:[];
                        this.pieLoading_yb = false
                    };
                }).catch(err =>{
                    this.pieChartData_cx.newVisitis.seriesData = [];
                    this.pieChartData_yb.newVisitis.seriesData = [];
                });
            },
            lineSales(type, startTime, endTime) {   //销售曲线--折线
                this.lineLoading = true
                 this.$http.get(this.GLOBAL.REQUESTURL + '/statistics/sellCurve?dataType='+type+'&startTime='+startTime+'&endTime='+endTime).then(res => {
                     var xData_cx = [];
                     var xData_yb = [];
                    const result2 = res.data;
                    if(result2 && result2.length > 0) {
                        this.lineLoading = false
                        result2.forEach(item => {
                            if(item.name == 'cxwy') {
                                this.lineChartData.newVisitis.cxData = item.data;
                                if(item.date_time && item.date_time.length > 0) {
                                    item.date_time.forEach(time=>{
                                        xData_cx.push(time.substring(5,10))
                                        this.lineChartData.newVisitis.xData = xData_cx
                                    })
                                };
                            }else if(item.name == 'yanbao'){
                                this.lineChartData.newVisitis.ybData = item.data;
                                if(item.date_time && item.date_time.length > 0) {
                                    item.date_time.forEach(time=>{
                                        xData_yb.push(time.substring(5,10))
                                        this.lineChartData.newVisitis.xData = xData_yb
                                    })
                                };
                            }
                        })
                    }else{
                        this.lineChartData.newVisitis.cxData = [];
                        this.lineChartData.newVisitis.ybData = [];
                        this.lineChartData.newVisitis.xData = [];
                    }
                    
                }).catch(err =>{
                    
                });
                
            },
            barCompeted(data_type, url) {      //柱形图
                if(data_type == 'cxwy') {this.barLoading_cx = true}
                else if(data_type == 'ybfw') {this.barLoading_yb = true}
                this.$http.get(this.GLOBAL.REQUESTURL + url).then(res => {
                    const result3 = res.data;
                    if(data_type == 'cxwy') {this.barLoading_cx = false}
                    else if(data_type == 'ybfw') {this.barLoading_yb = false}
                    if(result3 && result3.length > 0) {
                        if(data_type == 'cxwy'){
                            this.barChartData_cx.newVisitis.name1 = result3[0].time;
                            this.barChartData_cx.newVisitis.name2 = result3[1].time;

                            this.barChartData_cx.newVisitis.seriesData1 = result3[0].data;
                            this.barChartData_cx.newVisitis.seriesData2 = result3[1].data;
                        } else if(data_type == 'ybfw'){
                            this.barChartData_yb.newVisitis.name1 = result3[0].time;
                            this.barChartData_yb.newVisitis.name2 = result3[1].time;

                            this.barChartData_yb.newVisitis.seriesData1 = result3[0].data;
                            this.barChartData_yb.newVisitis.seriesData2 = result3[1].data;
                        }

                    }
                })
            }
        }
    }
</script>
<style scoped>
    #chartContainer {
        background:rgb(229, 240, 254);
        margin-bottom:10px;
    }
    .list {
        overflow:hidden;
        background: #FFFFFF;
        display: inline-block;
        margin: 10px;
        padding:10px;
        width: calc((100% - 90px ) / 2);
    }
    .list.interests {
        min-width: 450px;
        height: 269px;
    }
    .list.interests-total {
        width: calc(100% - 40px);
       /* width: 922px; */
        height: 402px;
        background: #FFFFFF;
    }
    .list .list-title {
        height: 38px;
        overflow: hidden;
    }
    .list .list-title .title {
        color: #2261C1;
        font-size:12px;
    }
    .list .list-chart {
        height: calc(100% - 38px);
    }
    .list .date {
        height:24px;
        line-height:24px;
        padding:0;
        font-size:10px;
        color:#B3B3B3;
    }
    .list .date .el-input__inner {
        width: 214px;
        height: 100%;
        padding: 0;
        border-radius: 0;
    }
    .list /deep/ .el-select {
        width: 80px;
        height: 24px;
        margin-left: 4px;
    }
    .list /deep/ .el-select>.el-input {
        height: 24px;
    }
    .list /deep/ .el-input--suffix .el-input__inner {
        height: 24px;
    }
    .list /deep/ .el-input__icon {
        line-height: 24px;
        margin-left: 4px;
    }
    #chartContainer /deep/ .el-range-editor .el-range-input {
        font-size: 10px !important;
        color: #2873E3 !important;
        width: 80px;
    }
    #chartContainer .list .date /deep/ .el-date-editor .el-range-separator {
        line-height: 22px;
        color:#B3B3B3;
    }
</style>